import React, { Component } from 'react'
import { WhiteSpace, Button, Toast } from 'antd-mobile'
import { Item, Icon, NavBar } from 'components'
import { cloneDeep } from 'lodash'
import './index.less'
import { post } from '../../utils'
import { browser } from 'muka'

export default class AccountLogin extends Component<any, any> {

    public autoFocusInst: any

    public pswRef: any

    public accountRef: any

    public state = {
        pswAccess: true,
        accountFocus: false,
        pswFocus: false,
        accoutInput: {
            login: 'accountLogin_accountItem',
            psw: 'accountLogin_accountItem'
        },
        pswInputType: 'password',
        accountLoginBtn: 'accountLogin_btnWrap_btn_default',
        isShowPsw: false,
        loginBtnLoading: false
    }
    // accountInputClass  pswInputClass
    public render(): JSX.Element {
        const { accountLoginBtn, accoutInput, loginBtnLoading } = this.state
        return (
            <div className="accountLogin">
                <div className="accountLogin_NavBar">
                    <div className="accountLogin_NavBar_conent">
                        <NavBar divider={false} title={<div className="accountLogin_NavBar_title">账号密码登录</div>} />
                    </div>
                </div>
                <div className="accountLogin_logo">
                    <img src={require('../../assets/logo.png')} />
                </div>
                <div className="accountLogin_inputWrap">
                    <Item
                        className={accoutInput.login}
                        title={this.accountInput()}
                    />
                    <WhiteSpace className="accountLogin_whiteSpace" />
                    <Item
                        className={accoutInput.psw}
                        title={this.pswInput()}
                    />
                </div>
                <div className="accountLogin_btnWrap">
                    <Button
                        loading={loginBtnLoading}
                        type="primary"
                        className={accountLoginBtn}
                        activeStyle={false}
                        onClick={this.handleLogin}
                    >
                        立即登录
                    </Button>
                </div>
            </div>
        )
    }
    private accountInput = () => {
        const { accountFocus } = this.state
        return (
            <div className="accountLogin_accountItem_title">
                <div>
                    <Icon type="phone" className="accountLogin_accountItem_left_icon" />
                </div>
                <input
                    placeholder="请输入手机号/用户名"
                    type="tel"
                    maxLength={11}
                    ref={(ref) => { this.accountRef = ref }}
                    onInput={this.handleInputAccount}
                    onFocus={this.handleAccountInputFocus}
                />
                <div className="accountLogin_accountItem_right_icon">
                    {(accountFocus)
                        ? <span className="accountLogin_accountItem_right_erroricon">
                            <Icon type="error" onClick={this.handleClearAccountInput} /></span>
                        : ''
                    }
                </div>
            </div>
        )
    }

    private pswInput = () => {
        const { pswInputType, pswFocus } = this.state
        return (
            <div className="accountLogin_accountItem_title">
                <div>
                    <Icon type="lock" className="accountLogin_accountItem_left_icon" />
                </div>
                <input
                    maxLength={18}
                    placeholder="请输入账号密码"
                    type={pswInputType}
                    ref={(ref) => { this.pswRef = ref }}
                    onInput={this.handleInputPsw}
                    onFocus={this.handlePswInputFocus}
                />
                <div className="accountLogin_accountItem_right_icon">
                    {
                        (pswFocus)
                            ? <span style={{ color: '#aaa', position: 'absolute', left: '-0.5rem', top: '0' }}>
                                <Icon type="error" onClick={this.handleClearPswtInput} />
                            </span>
                            : ''
                    }
                    {this.handlePswIcon()}
                </div>
            </div>
        )
    }

    private handleInputPsw = () => {
        this.handlePswInputFocus()
        this.setLoginBtnDisable()
    }

    private handleInputAccount = () => {
        const account = this.accountRef.value
        if (account && account.length === 11) {
            this.handleCheckPhone()
        }
        this.handleAccountInputFocus()
        this.setLoginBtnDisable()
    }

    private handleAccountInputFocus = () => {
        if (this.accountRef.value && this.accountRef.value.length > 0) {
            this.showInputClear('accountFocus', true)
            this.showInputClear('pswFocus', false)
        } else {
            this.showInputClear('accountFocus', false)
        }
    }
    private handlePswInputFocus = () => {
        if (this.pswRef.value && this.pswRef.value.length > 0) {
            this.showInputClear('accountFocus', false)
            this.showInputClear('pswFocus', true)
        } else {
            this.showInputClear('pswFocus', false)
        }
    }

    private handleCheckPhone = () => {
        const account = this.accountRef.value
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (account.length === 0) {
            Toast.info('请输入手机号码！', 1)
            this.showInputStatus('login', 'error')
            return false
        } else {
            if (!reg.test(account)) {
                Toast.info('手机格式不正确', 1)
                this.showInputStatus('login', 'error')
                return false
            }
        }
        this.showInputStatus('login', 'success')
        return true
    }
    private handleCheckPsw = () => {
        const psw = this.pswRef.value
        if (!psw || psw.length === 0) {
            Toast.info('请输入密码！', 1)
            this.showInputStatus('psw', 'error')
            return false
        }
        this.showInputStatus('psw', 'success')
        return true
    }
    private setLoginBtnDisable = () => {
        const psw = this.pswRef.value
        const account = this.accountRef.value
        if (psw && account && psw.length > 0 && account.length > 0) {
            this.disableLoginBtn(false)
        } else {
            this.disableLoginBtn(true)
        }
    }

    private handlePswIcon = () => {
        const { pswInputType } = this.state
        if (pswInputType === 'text') {
            return (
                <span>
                    <Icon type="show_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
                </span>
            )
        } else {
            return (
                <span>
                    <Icon type="hide_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
                </span>
            )
        }
    }

    private handleLogin = () => {
        const { accountLoginBtn } = this.state
        this.showInputClear('accountFocus', false)
        this.showInputClear('pswFocus', false)
        if (accountLoginBtn === 'accountLogin_btnWrap_btn_default') {
            return
        }
        if (!this.handleCheckPhone() || !this.handleCheckPsw()) {
            return
        }
        this.setState({
            loginBtnLoading: true
        })
        const search: any = browser.search

        if (search.type === 'wx') {
            const { wxInfo, path } = this.props
            post('usersapi/confirmWxUser', {
                user_name: this.accountRef.value,
                pwd: this.pswRef.value,
                wx_openid: wxInfo.wx_openid
            }).then((data: any) => {
                const { SET_USER_INFO, history } = this.props
                this.setState({
                    loginBtnLoading: false,
                })
                SET_USER_INFO(data)
                if (path) {
                    history.push(path)
                } else {
                    history.go(-2)
                }
            }).catch((data: any) => {
                this.setState({
                    loginBtnLoading: false,
                })
            })
        } else {
            post('usersapi/login', {
                name: this.accountRef.value,
                password: this.pswRef.value
            }).then((data: any) => {
                const { SET_USER_INFO, history, path } = this.props
                this.setState({
                    loginBtnLoading: false,
                })
                SET_USER_INFO(data)
                if (path) {
                    history.push(path)
                } else {
                    history.go(-2)
                }
            }).catch((data: any) => {
                this.setState({
                    loginBtnLoading: false,
                })
            })
        }

    }

    private showPsw = () => {
        const { pswInputType } = this.state
        let val: string = ''
        if (pswInputType === 'text') {
            val = 'password'
        } else {
            val = 'text'
        }
        this.setState({
            pswInputType: val
        })
    }
    private handleClearAccountInput = (ref: any) => {
        this.accountRef.value = ''
        this.showInputClear('accountFocus', false)
        this.disableLoginBtn(true)
        this.showInputStatus('login', 'success')
        this.accountRef.focus()

    }
    private handleClearPswtInput = (ref: any) => {
        this.pswRef.value = ''
        this.showInputClear('pswFocus', false)
        this.disableLoginBtn(true)
        this.showInputStatus('psw', 'success')
        this.pswRef.focus()
    }
    private disableLoginBtn = (status: boolean) => {
        let className = (status)
            ? 'accountLogin_btnWrap_btn_default'
            : 'accountLogin_btnWrap_btn_active'
        this.setState({
            accountLoginBtn: className
        })
    }
    private showInputClear = (type: string, isShow: boolean) => {
        let temp = {}
        temp[type] = isShow
        this.setState(temp)
    }
    private showInputStatus = (type: string, status: string) => {
        const temp = cloneDeep(this.state.accoutInput)
        if (status === 'success') {
            temp[type] = 'accountLogin_accountItem'
        } else if (status === 'error') {
            temp[type] = 'accountLogin_accountItem login_error_active'
        }
        this.setState({
            accoutInput: temp
        })
    }
}